<template>
    <el-main>
        <el-row :gutter="20">
            <div v-for="item,index in AppGroups" class="Groups">
                <el-col :span="8" class="card kjfs" style="height:500px;margin-right:1%;margin-bottom:1%;width:350px;background-color:rgba(229, 248, 238, 0.8);">
                    <div  v-on:click="routerGo(item)">
                        <div class="item">
                            <div class="jiaobiao">
                                <i v-if="item.Types=='ios'" class="fa fa-mobile fa-2x" style="margin-top: 10px;"></i>
                                <i v-if="item.Types=='android'" class="fa fa-android fa-2x" style="margin-top: 10px;"></i>
                            </div>
                            <div class="appinfo">
                                <!-- <el-card  class="cards"> -->
                                <!-- <img :src="item.Img" class="image"> -->
                                <div class="ico">
                                    <img :src="item.Img" style="width: 80px;">
                                </div>
                                <div>
                                    <span>
                                        <font>{{item.AppName}}</font>
                                    </span>
                                </div>
                                <div class="Qr">
                                    <img id="qrimg" :src="item.Qr">
                                </div>
                                <!-- </el-card> -->
                            </div>
                        </div>
                    </div>
                </el-col>
            </div>
        </el-row>
    </el-main>
</template>

<script>
import {AppGroup} from '../../api/api'; 
import {agentCheck} from '../../js/index'; 
export default {
    name: '',
    data(){
        return {
            ipwechat:"ceshi",
            AppGroups:[]
        }
    },
    mounted:function(){
        this.Groups();
    },
    methods: {
        routerGo(item)  {
            console.log(item);
        },
        Test(){
            this.ipwechat = agentCheck()
            var theUrl = "itms-services://?action=download-manifest&url=https://hwdev.xiezixiansheng.com:8010/qrimg/f193bfc8d1f564dddf55563391c0839a_ios_9.0e4be2c5ca523891a103b21e5825a0154.plist";
            window.location.href = theUrl;
        },
        Groups() {
            AppGroup().then(res => {
                    let {code,msg,data} = res;
                    if (code == 200) {
                        this.AppGroups = data.List;
                        console.log(this.AppGroups);
                        this.$message('APP分组信息获取成功')
                    }else{
                        this.$notify.error(
                            {title: '错误',
                            message: 'APP分组信息获取失败'
                        }) 
                    }
                }
            ).catch(
                function (error) {
                    this.$message.error(error)
                    this.$notify.error(
                    {
                        title: '错误',
                        message: '接口请求失败'
                    })
                }
                
            )
        }
    }//methods
}
    
</script>

<style type="text/css">
    .Groups{
        border: 20px;
        text-align: center;
        margin-left: 5%;
        margin-top: 20px;
    }
    .item{
        height: 100%;
        width: 100%;
        padding: 10px;
        position: relative;
        overflow: hidden;
        margin: 0 auto;
        background-color: rgba(241, 224, 238, 0.8);
    }
    .appinfo{
        min-height: 400px;
    }
    .image{
        /*text-align: center;*/
    }
    .cards {
        height: 420px;
        max-height: 420px;

    }
    .ico{
        text-align: center;
        height: 80px;
        width: auto;
        margin-bottom: 10px;
    }
    .Qr{
        text-align: center;
        margin-top: 10%;
        width: auto;
        /*height: 200px;*/
        /*border: #000 solid 1px;*/
        overflow: hidden;
        max-width: 100%;
        max-height: 100%;
        transition:all 0.6s;
    }
    .Qr:hover{
    -webkit-transform: scale(1.2);
    transform: scale(1.6);
    }
    #qrimg{
    text-align: center;
/*    width: 150px;
    height: 150px;*/
    border: #000 solid 1px;
    /*overflow: hidden;*/
    max-width: 50%;
    max-height: 50%;
    transition:all 0.6s;
    }
    #qrimg img{
        -webkit-transition:-webkit-transform 1s ease 0s;
        transition:transform 1s ease 0s;
        -webkit-transform-origin:center;
        transform-origin:center;
    }
    .jiaobiao{
        color: #fff;
        height: 50px;
        width: 150px;
        position: absolute;
        right: -55px;
        text-align: center;
        line-height: 30px;
        font-family: "黑体";
        background-color: rgba(109, 111, 242, 0.8);/*#0c60ee;*/
        -moz-transform:rotate(45deg);
        -webkit-transform:rotate(45deg);
        -o-transform:rotate(45deg);
        -ms-transform:rotate(45deg);
        transform:rotate(45deg);
        z-index:999;
    }
   /* @font-face {
    font-family: 'xin_shi_gu_yin';
    font-style: normal;
    font-weight: 400;
    src: url('/install/woff/xin_shi_gu_yin.woff2') format('woff2');
    }*/
</style>